<!--
 * @Descripttion:
 * @version:
 * @Author: cxguo
 * @Date: 2020-06-15 10:45:58
 * @LastEditors: cxguo
 * @LastEditTime: 2020-11-07 10:29:59
-->
<template>
  <div>
    <el-card shadow="never" class="oper-btn-card">
      <el-input
        v-model="searchData.keywords"
        clearable
        style="width: 300px"
        placeholder="按商品编号，名称，规格查询"
      />
      <el-button type="primary" :loading="btnLoading.search" @click="btnSearch">
        搜索
      </el-button>
    </el-card>
    <div class="margin-t2">
      <vxe-grid
        ref="table"
        class="grid"
        border
        resizable
        highlight-hover-row
        :loading="tableLoading.table"
        :columns="columnsData"
        :data="tableData.table"
      />
    </div>
    <div class="clearfix">
      <div class="pagination-container">
        <el-pagination
          background
          layout="total, sizes,prev, pager, next,jumper"
          :page-size="pageInfo.rows"
          :page-sizes="[20,30,40]"
          :current-page.sync="pageInfo.page"
          :total="pageInfo.total"
          @size-change="onSizeChange"
          @current-change="onCurrentChange"
        />
      </div>
    </div>
    <el-dialog
      title="库存分布"
      width="800px"
      height="90%"
      :visible.sync="dialogVisible"
      destroy-on-close
      append-to-body
    >
      <good-stock v-if="dialogVisible" :sku-id="currentRow.id" />
    </el-dialog>
  </div>
</template>
<script>
import { oftenuse } from '@/libs/mixins'
import { getMoreButton, getStockButton } from '@/components/Table/oper-btns.js'
import { listStock as listData } from '@/api/setup/origin.js'
import GoodStock from '@/views/stock/good-stock.vue'

export default {
  components: { GoodStock },
  mixins: [oftenuse],
  data() {
    return {
      currentRow: {},
      dialogVisible: false,
      columnsData: [
        { title: '序号', width: 60, fixed: 'left', align: 'center',
          slots: {
            default: (params) => {
              const { seq } = params
              const value = seq
              return [<span>{value}</span>]
            }
          }
        },
        { title: '操作', width: 100,
          slots: {
            default: (params) => {
              const { row } = params
              const h = this.$createElement
              const viewMoreNode = getMoreButton(h, { props: { type: 'text' },
                on: { click: () => { this.btnViewData(row) } }})
              const stockButtonNode = getStockButton(h, { props: { type: 'text' },
                on: { click: (row) => { this.btnGetStock(params) } }})
              const divNode = h('div', {
                attrs: {
                  class: 'table-oper-btns'
                }
              }, [viewMoreNode, stockButtonNode])
              return [divNode]
            }
          }
        },
        { field: 'code', title: '商品编号', width: 140 },
        { field: 'name', title: '商品名称', width: 200, showOverflow: true },
        { field: 'unitName', title: '基础单位', align: 'center', width: 80 },
        { field: 'originQuantity', title: '期初库存数量', align: 'right', width: 140 },
        { field: 'originCostPriceTotal', title: '期初库存金额', align: 'right', width: 140 }
      ]
    }
  },
  created() {
    this.listData()
  },
  methods: {
    btnViewData(row) {
      const { id } = row
      this.$router.push({ name: 'GoodsSkuView', query: { skuid: id }})
    },
    btnSearch() {
      this.setBtnLoading('search', true)
      this.listData().then(_ => {
        this.setBtnLoading('search', false)
      })
    },
    btnGetStock(params) {
      this.currentRow = params.row
      this.dialogVisible = true
    },
    listData(params = { page: this.pageInfo, data: this.searchData }) {
      this.setTableLoading('table', true)
      return listData(params).then(res => {
        this.setTableLoading('table', false)
        if (!res.data.flag) return
        const { records, total } = res.data.data
        this.setTableData('table', records)
        this.pageInfo.total = total
      })
    },
    onSizeChange() {},
    onCurrentChange() {}
  }
}
</script>

<style>

</style>
